import eventBus from "@/eventBus";
import defaultGif from "@/assets/default.gif";
import { debounce } from "@/utils";
import { server_url } from "@/urlConfig"; //引用服务器地址

/**
 * 总体思路
 */

//存放当前页面所有图片
let images = [];

//4、处理单个图片
function setImage(img) {
	//将所有图片的src先设置为默认加载图片
	img.dom.src = defaultGif;
	//获取该图片的相关属性
	const rect = img.dom.getBoundingClientRect();
	// console.log(rect);
	//获取当前屏幕尺寸
	const clientHeight = document.documentElement.clientHeight;
	//获取该图片的高度
	const height = rect.height || 150;
	//如果当前图片在屏幕区域内
	if (rect.top <= clientHeight && rect.top >= -height) {
		// //创建一个图片
		// const creatImg = new Image();
		// //监听图片是否加载完成
		// creatImg.onload = function () {
		// 	img.dom.src = img.src;
		// };
		// creatImg.src = img.src;
		img.dom.src = img.src;
		//从数组中删除这个图片。下次屏幕滚动时就不用再加载了
		images = images.filter((i) => i !== img);
	}
}
//3、处理当前页面的所有图片
function setImages() {
	for (const img of images) {
		setImage(img);
	}
}
//2、处理滚动事件
function handleScroll(dom) {
	setImages();
}

//监听滚动事件
eventBus.$on("mainScroll", debounce(handleScroll, 50));
export default {
	//1、在图片插入父元素后得到所有图片
	inserted(el, bindings) {
		const img = {
			dom: el,
			//加上服务器地址
			src: server_url + bindings.value,
		};
		images.push(img);
		// 立即处理它
		setImage(img);
	},
	unbind(el) {
		//当切换页面时去掉当前页面没有的图片
		images = images.filter((img) => img.dom !== el);
	},
};
